<template>
    <el-dialog :title="title" v-model="open" width="600px" append-to-body @close="close">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row>
                <el-col :span="24" v-if="form.parentId !== 0">
                    <el-form-item label="上级部门">
                        <el-select v-model="form.parentName" placeholder="请选择上级菜单" clearable>
                            <el-option :value="parentDeptData" style="height: auto;">
                                <el-tree :data="deptOptions"
                                         :props="deptTreeProps"
                                         node-key="deptId"
                                         accordion
                                         highlight-current
                                         @node-click="selectDeptParentId"
                                ></el-tree>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="部门名称" prop="deptName">
                        <el-input v-model="form.deptName" placeholder="请输入部门名称" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="显示排序" prop="orderNum">
                        <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="负责人" prop="leader">
                        <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="phone">
                        <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="部门状态">
                        <el-radio-group v-model="form.status">
                            <el-radio
                                    v-for="dict in statusOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictValue"
                            >{{dict.dictLabel}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {addSysDept, updateSysDept} from "/src/api/system/dept";

    export default {
        name: "update",
        emits: ['dialogStatusChanged'],
        props: {
            open: Boolean,
            title: String,
            form: Object,
            deptOptions: Array,
        },
        data() {
            return {
                statusOptions: [],
                deptTreeProps: {
                    children: 'children',
                    label: 'deptName'
                },
                parentDeptData: {},
                // 表单校验
                rules: {
                    parentId: [
                        { required: true, message: "上级部门不能为空", trigger: "blur" }
                    ],
                    deptName: [
                        { required: true, message: "部门名称不能为空", trigger: "blur" }
                    ],
                    orderNum: [
                        { required: true, message: "显示排序不能为空", trigger: "blur" }
                    ],
                    email: [
                        {
                            type: "email",
                            message: "'请输入正确的邮箱地址",
                            trigger: ["blur", "change"]
                        }
                    ],
                    phone: [
                        {
                            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                            message: "请输入正确的手机号码",
                            trigger: "blur"
                        }
                    ]
                }
            }
        },
        created() {
            this.getDicts("sys_normal_disable").then(response => {
                this.statusOptions = response.data;
            });
        },
        methods:{
            //选择上级部门
            selectDeptParentId(data, node, nodeData){
                this.parentDeptData = data
                this.form.parentName = data.deptName
                this.form.parentId = data.deptId
            },
            submitForm(){
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        if (this.form.deptId != undefined) {
                            updateSysDept(this.form).then(response => {
                                this.msgSuccess("修改成功");
                                this.close();
                            });
                        } else {
                            addSysDept(this.form).then(response => {
                                this.msgSuccess("新增成功");
                                this.close();
                            });
                        }
                    }
                })
            },
            //取消
            cancel() {
                this.$emit('dialogStatusChanged', false)
            },
            //关闭
            close() {
                this.$emit('dialogStatusChanged', false)
            },
        }
    }
</script>

<style scoped>

</style>
